<template>
  <div>
    <el-row gutter="20">
      <el-col span="12"><div class="c1"><center>
        <el-card>
          <img src="@/assets/imgs/101.jpg" width="100%" id="i1" alt="">
        </el-card>
        <a href="index.html" class="a1">
                <span>
                <img src="@/assets/imgs/shopping.png" id="i2" alt="">
                </span>
          <span id="s1">
                    购买
                </span>
        </a>
      </center>
      </div></el-col>
      <el-col span="12"><div class="c1">
        <div style="font-size: 35px"><img src="@/assets/imgs/Edit.png" id="i3" alt="">时空穿行</div><hr>
        <div style="font-size: 30px">售价:  ￥12</div><hr>
        <div style="font-size: 30px">书名:  love</div><hr>
        <div style="font-size: 30px" id="d1">内容简介: </div>
        <div style="font-size: 30px">113144141441141141414<br>
          113144141441141141414<br>
          113144141441141141414<br>
          113144141441141141414<br></div>
        <br>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "bookDetail"
}
</script>

<style>
#i1{
  height: 650px;
}
#i2{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
#i3{
  position: relative;
  width: 40px;
  height: 45px;
  top: 10px;
  margin-right: 8px;
}
#s1 {
  position: relative;
  top: -4px;
}
#d1{
  margin-top: 15px;
  margin-bottom: 15px;
}
#a{
  margin-top: 20px;
  background-color: greenyellow;
  width: 180px;
  height: 40px;
  display: block;/*让整个框可以点击*/
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 20px;
  text-decoration: none;/*去除下划线*/
  border-radius: 3px
}
</style>